<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      title='退款'
      :style="{
        width: dialogWidth,
      }"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :rules="rules"
            :model="formValue"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            :label-width="100"
            class="py-4"
          >
            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
              <n-gi span="1">
                <n-form-item label="退款方式" path="refundType" :show-require-mark="true">
                  <a-radio-group v-model:value="formValue.refundType" name="refundType">
                    <a-radio :value="1">仅退款</a-radio>
                    <a-radio :value="2">退款并取消订单</a-radio>
                  </a-radio-group>
                  <template #feedback>
                    <div style="font-size: 12px">仅退款：订单会处于部分退款状态，订单状态不会改变</div>
                    <div style="font-size: 12px; margin-bottom: 8px">退款并取消订单：退款后，订单会处于已取消状态</div>
                  </template>
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="取消原因" path="adminCancelReason">
                  <n-input
                    type="textarea"
                    placeholder="请填写取消原因"
                    v-model:value="formValue.adminCancelReason"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="退款金额" path="refundMoney" :show-require-mark="true">
                  <n-input-group>
                    <n-input-number placeholder="请输入" :show-button="false" :min="0" :max="formValue.maxRefundMoney" :precision="2" v-model:value="formValue.refundMoney" style="width: 100px" />
                    <n-input-group-label>JPY</n-input-group-label>
                  </n-input-group>
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <div style="color: red; padding-left: 100px; ">订单金额为{{formValue.orderAmount}}JPY，最多可退款{{formValue.maxRefundMoney}}JPY</div>
              </n-gi>
            </n-grid>
          </n-form>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm">
            取消
          </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
            确定
          </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { CancelPay } from '@/api/spaOrder';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
import {useMessage} from 'naive-ui';
import { adaModalWidth } from '@/utils/hotgo';

const emit = defineEmits(['reloadTable']);
const message = useMessage();
const settingStore = useProjectSettingStore();
const loading = ref(false);
const showModal = ref(false);
const formRef = ref<any>({});
const formBtnLoading = ref(false);
const dialogWidth = computed(() => {
  return adaModalWidth(840);
});
const formValue = ref({
  adminCancelReason: "",
  id: 0,
  refundType: 1,
  refundMoney: null,
  orderAmount: 0,
  maxRefundMoney: 0,
})

// 表单验证规则
const rules = {
  adminCancelReason: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入取消原因',
  },
};

function openModal(state) {
  showModal.value = true;

  formValue.value.id = state.id
  formValue.value.orderAmount = state.orderAmount
  formValue.value.maxRefundMoney = parseFloat(state.orderAmount - state.couponAmount);
}

function confirmForm(e) {
  e.preventDefault();
  formBtnLoading.value = true;
  formRef.value.validate((errors) => {
    if (!errors) {
      if(!formValue.value.refundMoney || formValue.value.refundMoney < 0 || formValue.value.refundMoney > formValue.value.maxRefundMoney){
        formBtnLoading.value = false;
        message.error('退款金额不正确');
        return false;
      }
      CancelPay({
        id: formValue.value.id,
        refundType: formValue.value.refundType,
        refundMoney: formValue.value.refundMoney,
        adminCancelReason: formValue.value.adminCancelReason,
      }).then((_res) => {
        message.success('操作成功');
        formBtnLoading.value = false;
        setTimeout(() => {
          closeForm();
          emit('reloadTable');
        });
      }).catch((err)=>{
        formBtnLoading.value = false;
      });
    } else {
      formBtnLoading.value = false;
      message.error('请填写完整信息');
    }
  });
}

function closeForm() {
  showModal.value = false;
  formValue.value.adminCancelReason = ""
  formValue.value.id = 0
  formValue.value.refundType = 1
  formValue.value.refundMoney = null
  formValue.value.orderAmount = 0
  formValue.value.maxRefundMoney = 0
  loading.value = false;
}

defineExpose({
  openModal,
});
</script>

<style lang="less"></style>


